<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Search for a User</title>
        <style>
            .messagetext{
                font-size: large;
            }
            .highPublic{
                font-size: x-large;
                color: white;
                background-color: #009ea5;
                display:inline-block
            }
            .highPrivate{
                font-size: x-large;
                color: white;
                background-color: #c5d731;
                display:inline-block
            }
        </style>
    </h:head>
    <h:body>
        <h:panelGrid columns="3" style="width: 100%">
            <h:graphicImage value="/images/Simbolo_Meteocal.png" height="100"></h:graphicImage>
            <h1>Welcome back</h1>
            <p:button outcome="eventCreation" value="Create a new Event" />
        </h:panelGrid>
        <hr/>
        <h:form id="form">
            <h1>Search for a user</h1>
            <p:inputText id="input" value="#{searchBean.user}"/>
            <p:commandButton id="goSearch" value="Start the search!" update="list" action="#{searchBean.search()}">

            </p:commandButton>
            <p:dataList id="list" value="#{searchBean.users}" var="user" type="ordered" itemType="none" paginator="true" rows="10" styleClass="paginated" >
                <f:facet name="header">
                    Search Result
                </f:facet>
                <p:commandLink update=":form:detail" oncomplete="PF('MessageDialog').show()" title="View Detail" styleClass="ui-icon ui-icon-search" style="float:left;margin-right:10px">
                    <f:setPropertyActionListener value="#{user}" target="#{searchBean.selectedUser}" />
                </p:commandLink>
                <h:outputText value="#{user.email} " styleClass="#{searchBean.getStyle(user)}"/>
            </p:dataList>

            <p:dialog header="What can I do?" widgetVar="MessageDialog" modal="true" showEffect="blind" hideEffect="explode" resizable="false">
                <p:outputPanel id="detail" style="text-align:center;">
                    <p:panelGrid  columns="2" rendered="#{not empty searchBean.selectedUser}" columnClasses="label,value">
                        <f:facet name="header">
                            <p:graphicImage value="/images/#{searchBean.getImage()}" height="100"/>
                        </f:facet>

                        <h:outputText value="Name: " />
                        <h:outputText value="#{searchBean.selectedUser.name}" styleClass="messagetext"/>

                        <h:outputText value="Surname:  " />
                        <h:outputText value="#{searchBean.selectedUser.surname}" styleClass="messagetext"/>

                        <h:outputText value="Email " />
                        <h:outputText value="#{searchBean.selectedUser.email}" styleClass="messagetext"/>
                    </p:panelGrid>
                    <p:commandButton value="Go to Calendar" action="#{searchBean.goToCalendar()}" disabled="#{searchBean.ispossibleAction()}">
                        <f:setPropertyActionListener value="#{searchBean.selectedUser}" target="#{searchBean.selectedUser}"/>
                    </p:commandButton>
                </p:outputPanel>
            </p:dialog>
        </h:form>
        <hr/>
        <h:panelGrid columns="3" style="width: 100%">
            <h:form>
                <p:commandButton action="#{searchBean.goBack()}" value="Move back to your page" />
            </h:form>
            <p:button outcome="messagedatalist" value="Move to your notifications page" />
            <h:form>
                <p:commandButton action="#{loginBean.logout()}" value="Logout" />
            </h:form>
        </h:panelGrid>
    </h:body>
</html>

